import 'package:flutter_web/material.dart';

import 'package:zz_blog/common/screen.dart';
import 'package:zz_blog/model/bloc/main_bloc.dart';
import 'package:zz_blog/model/bloc_provider.dart';
import 'package:zz_blog/page/a.dart';

///
/// 主页面
///
/// @author zzzz1997
/// @created_time 20190805
///
class HomePage extends StatelessWidget {
  // 标题
  final List<String> _list = ['主页', '喵', '关于', '联系我'];

  @override
  Widget build(BuildContext context) {
    // 初始化
    Screen.init(context);
    MainBloc mainBloc = BlocProvider.of<MainBloc>(context);
    mainBloc.setIndex(context, mainBloc.indexs[0], rebuild: true);
    return StreamBuilder(
      stream: mainBloc.themeStream,
      initialData: mainBloc.themeStyle,
      builder: (_, snapshot) => Theme(
        data: snapshot.data.themeData,
        child: Scaffold(
          backgroundColor: snapshot.data.colors.background,
          body: Align(
            alignment: Alignment.topCenter,
            child: SizedBox(
              width: Screen.realWidth,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: _buildNavigitor(context, mainBloc),
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                              settings: RouteSettings(name: '/a'),
                              builder: (_) => APage(),
                            ));
                      },
                      child: Text(
                        'Hello, World!',
                      ),
                    ),
                    StreamBuilder(
                      stream: mainBloc.widgetStream,
                      initialData: mainBloc.builder['home'](context),
                      builder: (context, snapshot) => snapshot.data,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  ///
  /// 构建导航栏
  ///
  Widget _buildNavigitor(BuildContext context, MainBloc mainBloc) {
    if (Screen.screenSize != ScreenSize.XS) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          _buildLogo(mainBloc),
          StreamBuilder<List<int>>(
            stream: mainBloc.indexsStream,
            initialData: mainBloc.indexs,
            builder: (_, snapshot) => Row(
              mainAxisSize: MainAxisSize.min,
              children: _list.map((l) {
                int i = _list.indexOf(l);
                return Padding(
                  padding: EdgeInsets.all(4.0),
                  child: GestureDetector(
                    onTap: () {
                      mainBloc.setIndex(context, i);
                    },
                    child: Listener(
                      onPointerEnter: (_) {
                        mainBloc.setHoverIndex(i);
                      },
                      onPointerExit: (_) {
                        mainBloc.removeHover();
                      },
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                          color: snapshot.data[0] == i
                              ? mainBloc.themeStyle.colors.navSelected
                              : snapshot.data[1] == i
                                  ? mainBloc.themeStyle.colors.navHover
                                  : mainBloc.themeStyle.colors.navNormal,
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            _list[i],
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        ],
      );
    } else {
      return StreamBuilder(
        stream: mainBloc.expandStream,
        initialData: mainBloc.isExpanded,
        builder: (_, snapshot) => ExpansionPanelList(
          expansionCallback: (_, isExpanded) {
            mainBloc.changeExpand(isExpanded);
          },
          children: <ExpansionPanel>[
            ExpansionPanel(
              isExpanded: snapshot.data,
              headerBuilder: (_, __) => _buildLogo(mainBloc),
              body: StreamBuilder(
                stream: mainBloc.indexsStream,
                initialData: mainBloc.indexs,
                builder: (_, snapshot) => Column(
                  mainAxisSize: MainAxisSize.min,
                  children: _list.map((l) {
                    int i = _list.indexOf(l);
                    return DecoratedBox(
                      decoration: BoxDecoration(
                        color: snapshot.data[0] == i
                            ? mainBloc.themeStyle.colors.navSelected
                            : snapshot.data[1] == i
                                ? mainBloc.themeStyle.colors.navHover
                                : mainBloc.themeStyle.colors.navNormal,
                      ),
                      child: GestureDetector(
                        onTap: () {
                          mainBloc.setIndex(context, i);
                        },
                        child: Listener(
                          onPointerEnter: (_) {
                            mainBloc.setHoverIndex(i);
                          },
                          onPointerExit: (_) {
                            mainBloc.removeHover();
                          },
                          child: ListTile(
                            title: Text(
                              _list[i],
                            ),
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
            ),
          ],
        ),
      );
    }
  }

  ///
  /// 构建logo布局
  ///
  Widget _buildLogo(MainBloc mainBloc) {
    return GestureDetector(
      onTap: mainBloc.changeTheme,
      child: Text(
        'zzBlog',
        style: TextStyle(
          fontSize: 32,
        ),
      ),
    );
  }
}
